"use client";

import { useListFilter } from "@/service/align";
import { useCountStore } from "@/store/task";
import SendIcon from "@mui/icons-material/Send";
import { Box, Button, Typography } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import Fab from "@mui/material/Fab";
import FormControlLabel from "@mui/material/FormControlLabel";
import Paper from "@mui/material/Paper";
import Switch, { SwitchProps } from "@mui/material/Switch";
import { styled } from "@mui/material/styles";
import { useEffect } from "react";
import MulSelect from "../components/MulityplySelectAdvance";
const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  flexGrow: 1,
  transition: theme.transitions.create(["height"], {
    duration: 1000,
  }),
}));

const names = ["SpeciesTaxid_357276"];

const IOSSwitch = styled((props: SwitchProps) => (
  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
  width: 42,
  height: 26,
  padding: 0,
  "& .MuiSwitch-switchBase": {
    padding: 0,
    margin: 2,
    transitionDuration: "300ms",
    "&.Mui-checked": {
      transform: "translateX(16px)",
      color: "#fff",
      "& + .MuiSwitch-track": {
        backgroundColor: theme.palette.mode === "dark" ? "#2ECA45" : "#65C466",
        opacity: 1,
        border: 0,
      },
      "&.Mui-disabled + .MuiSwitch-track": {
        opacity: 0.5,
      },
    },
    "&.Mui-focusVisible .MuiSwitch-thumb": {
      color: "#33cf4d",
      border: "6px solid #fff",
    },
    "&.Mui-disabled .MuiSwitch-thumb": {
      color:
        theme.palette.mode === "light"
          ? theme.palette.grey[100]
          : theme.palette.grey[600],
    },
    "&.Mui-disabled + .MuiSwitch-track": {
      opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
    },
  },
  "& .MuiSwitch-thumb": {
    boxSizing: "border-box",
    width: 22,
    height: 22,
  },
  "& .MuiSwitch-track": {
    borderRadius: 26 / 2,
    backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
    opacity: 1,
    transition: theme.transitions.create(["background-color"], {
      duration: 500,
    }),
  },
}));

export default function StepTwo(props: any) {
  const {
    setFilter,
    setOptions,
    filter_options,
    setBacterialFilter,
    setPhageFilter,
    setProPhageFilter,
    deleteOptions,
    filter_state,
    setState,
    cleanOption,
  } = useCountStore();

  const { data: dataSource, isLoading } = useListFilter();

  const handleChangeFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.checked) {
      cleanOption();
    }
    setFilter(event.target.checked);
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (filter_options.is_filter) {
      setFilter(false);
    }
    if (!filter_options.options.includes(event.target.value)) {
      setOptions(event.target.value);
    } else {
      deleteOptions(event.target.value);
    }

    setState({
      ...filter_state,
      [event.target.name]: event.target.checked,
    });
  };

  const { Bacteria, Phage, Prophage } = filter_state;

  useEffect(() => {
    if (filter_options.is_filter) {
      setState({
        Bacteria: false,
        Phage: false,
        Prophage: false,
      });
    }
  }, [filter_options.is_filter, setState]);

  useEffect(() => {
    if (filter_options.options && filter_options.options.length > 0) {
      setFilter(false);
    }
  }, [filter_options.options, setFilter]);

  return (
    <Item sx={{ height: "677px", position: "relative" }}>
      <Typography
        sx={{ flex: "1 1 100%", marginTop: "1rem", marginBottom: "1rem" }}
        variant="h6"
        component="div"
      >
        Set up{" "}
        <Box component="span">
          Query
        </Box>
      </Typography>
      <Box sx={{ width: "500px", margin: "0 auto" }}>
        <FormControlLabel
          value="proPhages"
          control={
            <Checkbox
              checked={Prophage}
              onChange={handleChange}
              name="Prophage"
            />
          }
          label="All prophage"
        />

        <FormControlLabel
          value="bacteria"
          control={
            <Checkbox
              checked={Bacteria}
              onChange={handleChange}
              name="Bacteria"
            />
          }
          label="All bacteria"
        />
        <FormControlLabel
          value="phage"
          control={
            <Checkbox checked={Phage} onChange={handleChange} name="Phage" />
          }
          label="All phage"
        />

        <FormControlLabel
          sx={{
            width: "100px",
          }}
          control={
            <IOSSwitch
              sx={{ m: 1 }}
              checked={filter_options.is_filter}
              onChange={handleChangeFilter}
            />
          }
          label="Filter"
        />

        {filter_options.is_filter && (
          <Box sx={{ position: "relative", left: "2rem", width: "100%" }}>
            <Typography
              sx={{ flex: "1 1 100%", textAlign: "left" }}
              variant="body1"
              component="div"
            >
              <Box component="span" sx={{ color: "primary.main" }}>
                Bacteria species{" "}
              </Box>{" "}
              filter:
            </Typography>
            <Box
              sx={{ width: "377px", marginBottom: "1rem", marginTop: "1rem" }}
            >
              <MulSelect
                placeHolder={"Filter"}
                dataSource={dataSource?.bacteria || []}
                type={"bacteria"}
                value={filter_options.bacterial_filter}
                setValue={setBacterialFilter}
              />
            </Box>
            <Typography
              sx={{ flex: "1 1 100%", textAlign: "left" }}
              variant="body1"
              component="div"
            >
              <Box component="span" sx={{ color: "primary.main" }}>
                Phage host species
              </Box>{" "}
              filter:
            </Typography>
            <Box
              sx={{ width: "377px", marginBottom: "1rem", marginTop: "1rem" }}
            >
              <MulSelect
                placeHolder={"Filter"}
                dataSource={dataSource?.phage || []}
                type={"phage"}
                value={filter_options.phage_filter}
                setValue={setPhageFilter}
              />
            </Box>

            <Typography
              sx={{ flex: "1 1 100%", textAlign: "left" }}
              variant="body1"
              component="div"
            >
              <Box component="span" sx={{ color: "primary.main" }}>
                Prophage host species
              </Box>{" "}
              filter:
            </Typography>
            <Box sx={{ width: "377px", marginTop: "1rem" }}>
              <MulSelect
                placeHolder={"Filter"}
                dataSource={dataSource?.pro_phage || []}
                type={"proPhage"}
                setValue={setProPhageFilter}
                value={filter_options.prophage_filter}
              />
            </Box>
          </Box>
        )}

        <Button
          variant="text"
          sx={{
            marginTop: "2rem",
            padding: "0.5rem 2rem",
            position: "absolute",
            bottom: "1rem",
            right: "13rem",
            textTransform: "none",
          }}
          onClick={() => props.handleLastStep(1)}
        >
          {/* <SendIcon sx={{ mr: 1 }} /> */}
          Last Step
        </Button>
        <Fab
          variant="extended"
          sx={{
            marginTop: "2rem",
            background: "rgb(245,245,245)",
            "&:hover": {
              background: "rgb(224,224,224)",
            },
            paddingLeft: "2rem",
            paddingRight: "2rem",
            position: "absolute",
            bottom: "1rem",
            right: "1rem",
          }}
          onClick={() => props.handleNextStep(1)}
        >
          <SendIcon sx={{ mr: 1 }} />
          Next Step
        </Fab>
        {/* <Fab
          variant="extended"
          sx={{
            marginTop: "2rem",
            background: "rgb(245,245,245)",
            "&:hover": {
              background: "rgb(224,224,224)",
            },
            textTransform: "none",
            paddingLeft: "2rem",
            paddingRight: "2rem",
            position: "absolute",
            bottom: "1rem",
            right: "13rem",
          }}
          onClick={() => props.handleLastStep(1)}
        >
          Last Step
        </Fab> */}
      </Box>
    </Item>
  );
}
